<div class="esh-orders_new-header">
    <div class="container">
        <a class="esh-orders_new-back" routerLink="/basket">Back to basket</a>
    </div>
</div>

<div class="container">
    <div  class="alert alert-warning esh-orders_new-alert" role="alert" [hidden]="!errorReceived">
        Not possible to create a new order, please try later on
    </div>
    <form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
        <section class="esh-orders_new-section">
            <h4 class="esh-orders_new-title">Shipping Address</h4>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
                        <label class="esh-orders_new-title">Address</label>
                        <input class="form-control form-input" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
                        <div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
                        <label class="esh-orders_new-title">City</label>
                        <input class="form-control form-input" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
                        <div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
                        <label class="esh-orders_new-title">State</label>
                        <input class="form-control form-input" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
                        <div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
                        <label class="esh-orders_new-title">Country</label>
                        <input class="form-control form-input" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
                        <div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="esh-orders_new-section">
            <h4 class="esh-orders_new-title">Payment method</h4>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
                        <label class="esh-orders_new-title">Card number</label>
                        <input class="form-control form-input" type="text" placeholder="000000000000000" [formControl]="newOrderForm.controls['cardnumber']">
                        <div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
                        <label class="esh-orders_new-title">Cardholder name</label>
                        <input class="form-control form-input" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
                        <div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
                        <label class="esh-orders_new-title">Expiration date</label>
                        <input class="form-control form-input form-input-medium" type="text" placeholder="MM/YY" [formControl]="newOrderForm.controls['expirationdate']">
                        <div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
                        <label class="esh-orders_new-title">Security code</label>
                        <input class="form-control form-input form-input-small" type="text" placeholder="000" [formControl]="newOrderForm.controls['securitycode']">
                        <div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="esh-orders_new-section">
            <article class="esh-orders_new-titles row">
                <section class="esh-orders_new-title col-xs-12">Order details</section>
            </article>

            <article class="esh-orders_new-items esh-orders_new-items--border row"
                     *ngFor="let item of order.orderItems">
                <section class="esh-orders_new-item col-md-4 hidden-md-down">
                    <img class="esh-orders_new-image" src="{{item.pictureurl}}">
                </section>
                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice}}</section>
                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
            </article>
        </section>

        <section class="esh-orders_new-section esh-orders_new-section--right">
            <article class="esh-orders_new-titles row">
                <section class="esh-orders_new-title col-xs-9"></section>
                <section class="esh-orders_new-title col-xs-2">Total</section>
            </article>

            <article class="esh-orders_new-items row">
                <section class="esh-orders_new-item col-xs-9"></section>
                <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total}}</section>
            </article>
        </section>
        <section class="esh-orders_new-section">
            <div class="form-group">
                <div class="col-md-9">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
                </div>
            </div>
        </section>
    </form>
</div>